"use strict";
cc._RF.push(module, '37a55PFvLVK3bflj3g4a2rl', 'RadarChart');
// eazax-ccc/components/RadarChart.ts

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var _a = cc._decorator, ccclass = _a.ccclass, property = _a.property, executeInEditMode = _a.executeInEditMode, executionOrder = _a.executionOrder;
/**
 * 雷达图组件（cc.Graphics）
 * @see RadarChart.ts https://gitee.com/ifaswind/eazax-ccc/blob/master/components/RadarChart.ts
 * @see Example https://ifaswind.gitee.io/eazax-cases/?case=radarChart
 * @version 20210521
 */
var RadarChart = /** @class */ (function (_super) {
    __extends(RadarChart, _super);
    function RadarChart() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.target = null;
        _this._axisLength = 200;
        _this._axes = 6;
        _this._axisScales = 3;
        _this._drawAxes = true;
        _this._gridLineWidth = 4;
        _this._innerGridLineWidth = 4;
        _this._gridLineColor = cc.Color.GRAY;
        _this._gridFillColor = cc.color(100, 100, 100, 100);
        _this._dataValuesStrings = ['0.8,0.5,0.6,0.5,0.8,0.6', '0.5,0.9,0.5,0.8,0.5,0.9'];
        _this._dataLineWidths = [5, 5];
        _this._dataLineColors = [cc.Color.BLUE, cc.Color.RED];
        _this._dataFillColors = [cc.color(120, 120, 180, 100), cc.color(180, 120, 120, 100)];
        _this._dataJoinColors = [];
        _this._drawDataJoin = true;
        _this.graphics = null;
        _this.keepUpdating = false;
        _this.angles = null;
        _this._curDatas = [];
        _this.toRes = null;
        return _this;
    }
    Object.defineProperty(RadarChart.prototype, "axisLength", {
        get: function () { return this._axisLength; },
        set: function (value) { this._axisLength = value; this.draw(this.curDatas); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "axes", {
        get: function () { return this._axes; },
        set: function (value) { this._axes = Math.floor(value >= 3 ? value : 3); this.draw(this.curDatas); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "axisScales", {
        get: function () { return this._axisScales; },
        set: function (value) { this._axisScales = Math.floor(value >= 1 ? value : 1); this.draw(this.curDatas); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "drawAxes", {
        get: function () { return this._drawAxes; },
        set: function (value) { this._drawAxes = value; this.draw(this.curDatas); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "gridLineWidth", {
        get: function () { return this._gridLineWidth; },
        set: function (value) { this._gridLineWidth = value; this.draw(this.curDatas); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "innerGridLineWidth", {
        get: function () { return this._innerGridLineWidth; },
        set: function (value) { this._innerGridLineWidth = value; this.draw(this.curDatas); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "gridLineColor", {
        get: function () { return this._gridLineColor; },
        set: function (value) { this._gridLineColor = value; this.draw(this.curDatas); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "gridFillColor", {
        get: function () { return this._gridFillColor; },
        set: function (value) { this._gridFillColor = value; this.draw(this.curDatas); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "dataValuesStrings", {
        get: function () { return this._dataValuesStrings; },
        set: function (value) { this._dataValuesStrings = value; this.drawWithProperties(); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "dataLineWidths", {
        get: function () { return this._dataLineWidths; },
        set: function (value) { this._dataLineWidths = value; this.drawWithProperties(); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "dataLineColors", {
        get: function () { return this._dataLineColors; },
        set: function (value) { this._dataLineColors = value; this.drawWithProperties(); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "dataFillColors", {
        get: function () { return this._dataFillColors; },
        set: function (value) { this._dataFillColors = value; this.drawWithProperties(); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "dataJoinColors", {
        get: function () { return this._dataJoinColors; },
        set: function (value) { this._dataJoinColors = value; this.drawWithProperties(); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "drawDataJoin", {
        get: function () { return this._drawDataJoin; },
        set: function (value) { this._drawDataJoin = value; this.draw(this.curDatas); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RadarChart.prototype, "curDatas", {
        get: function () { return this._curDatas; },
        enumerable: false,
        configurable: true
    });
    RadarChart.prototype.onLoad = function () {
        this.init();
        this.drawWithProperties();
    };
    RadarChart.prototype.update = function () {
        if (!this.keepUpdating || this._curDatas.length === 0) {
            return;
        }
        this.draw(this._curDatas);
    };
    /**
     * 初始化
     */
    RadarChart.prototype.init = function () {
        // 获取组件
        if (!this.target) {
            this.target = this.node;
        }
        this.graphics = this.target.getComponent(cc.Graphics) || this.target.addComponent(cc.Graphics);
        // 设置端点和拐角样式
        this.graphics.lineJoin = cc.Graphics.LineJoin.ROUND;
        this.graphics.lineCap = cc.Graphics.LineCap.ROUND;
    };
    /**
     * 使用当前属性绘制
     */
    RadarChart.prototype.drawWithProperties = function () {
        // 获取属性面板配置
        var datas = [], valueStrings = this.dataValuesStrings, lineWidths = this._dataLineWidths, lineColors = this._dataLineColors, fillColors = this._dataFillColors, joinColors = this._dataJoinColors;
        for (var i = 0; i < valueStrings.length; i++) {
            datas.push({
                values: this.processValuesString(valueStrings[i]),
                lineWidth: lineWidths[i] || defaultOptions.lineWidth,
                lineColor: lineColors[i] || defaultOptions.lineColor,
                fillColor: fillColors[i] || defaultOptions.fillColor,
                joinColor: joinColors[i] || defaultOptions.joinColor
            });
        }
        // 绘制
        this.draw(datas);
    };
    /**
     * 将数值字符串转为数值数组
     * @param valuesString 数值字符串
     */
    RadarChart.prototype.processValuesString = function (valuesString) {
        var strings = valuesString.split(','), values = [];
        for (var j = 0; j < strings.length; j++) {
            var value = parseFloat(strings[j]);
            values.push(isNaN(value) ? 0 : value);
        }
        return values;
    };
    /**
     * 画基本线框
     */
    RadarChart.prototype.drawBase = function () {
        // 填充染料
        var graphics = this.graphics;
        graphics.lineWidth = this._gridLineWidth;
        graphics.strokeColor = this._gridLineColor;
        graphics.fillColor = this._gridFillColor;
        // 计算轴线角度
        var angles = this.angles = [], 
        // 轴间夹角
        iAngle = 360 / this.axes;
        for (var i = 0; i < this.axes; i++) {
            angles.push(iAngle * i);
        }
        // 计算刻度坐标
        var scalesSet = [], axisLength = this._axisLength, axisScales = this._axisScales, iLength = axisLength / axisScales;
        for (var i = 0; i < axisScales; i++) {
            var scales = [];
            // 计算刻度在轴上的位置
            var length = axisLength - (iLength * i);
            for (var j = 0, l = this.angles.length; j < l; j++) {
                // 将角度转为弧度
                var radian = (Math.PI / 180) * this.angles[j];
                // 根据三角公式计算刻度相对于中心点（0, 0）的坐标
                scales.push(cc.v2(length * Math.cos(radian), length * Math.sin(radian)));
            }
            scalesSet.push(scales);
        }
        // 创建轴线
        var out = scalesSet[0];
        if (this._drawAxes) {
            for (var i = 0; i < out.length; i++) {
                graphics.moveTo(0, 0);
                graphics.lineTo(out[i].x, out[i].y);
            }
        }
        // 创建外网格线
        graphics.moveTo(out[0].x, out[0].y);
        for (var i = 1; i < out.length; i++) {
            graphics.lineTo(out[i].x, out[i].y);
        }
        // 闭合当前线条（外网格线）
        graphics.close();
        // 填充线条包围的空白区域
        graphics.fill();
        // 绘制已创建的线条（轴线和外网格线）
        graphics.stroke();
        // 画内网格线
        if (scalesSet.length > 1) {
            graphics.lineWidth = this._innerGridLineWidth;
            // 创建内网格线
            for (var i = 1; i < scalesSet.length; i++) {
                var set = scalesSet[i];
                graphics.moveTo(set[0].x, set[0].y);
                for (var j = 1; j < set.length; j++) {
                    graphics.lineTo(set[j].x, set[j].y);
                }
                // 闭合当前线条（内网格线）
                graphics.close();
            }
            // 绘制已创建的线条（内网格线）
            graphics.stroke();
        }
    };
    /**
     * 绘制数据
     * @param data 数据
     */
    RadarChart.prototype.draw = function (data) {
        // 擦除旧图像
        var graphics = this.graphics;
        graphics.clear();
        // 画轴线和网格线
        this.drawBase();
        // 包装单条数据
        var datas = Array.isArray(data) ? data : [data];
        this._curDatas = datas;
        // 数值不足需补 0
        this.resizeCurDatasValues(0);
        // 开始绘制数据
        var axes = this.axes, axisLength = this.axisLength, angles = this.angles;
        for (var i = 0; i < datas.length; i++) {
            var data_1 = datas[i];
            // 装填染料
            graphics.strokeColor = data_1.lineColor || defaultOptions.lineColor;
            graphics.fillColor = data_1.fillColor || defaultOptions.fillColor;
            graphics.lineWidth = data_1.lineWidth || defaultOptions.lineWidth;
            // 计算节点坐标
            var coords = [];
            for (var j = 0; j < axes; j++) {
                var length = (data_1.values[j] > 1 ? 1 : data_1.values[j]) * axisLength, radian = (Math.PI / 180) * angles[j];
                coords.push(cc.v2(length * Math.cos(radian), length * Math.sin(radian)));
            }
            // 创建线条
            graphics.moveTo(coords[0].x, coords[0].y);
            for (var j = 1; j < coords.length; j++) {
                graphics.lineTo(coords[j].x, coords[j].y);
            }
            // 闭合线条
            graphics.close();
            // 填充包围区域
            graphics.fill();
            // 绘制线条
            graphics.stroke();
            // 绘制数据节点
            if (this._drawDataJoin) {
                for (var j = 0; j < coords.length; j++) {
                    var coord = coords[j];
                    // 大圆
                    graphics.strokeColor = data_1.lineColor || defaultOptions.lineColor;
                    graphics.circle(coord.x, coord.y, 2);
                    graphics.stroke();
                    // 小圆
                    graphics.strokeColor = data_1.joinColor || defaultOptions.joinColor;
                    graphics.circle(coord.x, coord.y, .65);
                    graphics.stroke();
                }
            }
        }
    };
    /**
     * 缓动绘制
     * @param data 目标数据
     * @param duration 动画时长
     */
    RadarChart.prototype.to = function (data, duration) {
        var _this = this;
        return new Promise(function (res) {
            var _a;
            // 处理上一个 Promise
            _this.unscheduleAllCallbacks();
            _this.toRes && _this.toRes();
            _this.toRes = res;
            // 包装单条数据
            var datas = Array.isArray(data) ? data : [data];
            // 打开每帧更新
            _this.keepUpdating = true;
            // 动起来！
            for (var i = 0; i < datas.length; i++) {
                var curData = _this._curDatas[i];
                if (!curData) {
                    continue;
                }
                // 数值动起来！
                var data_2 = datas[i];
                for (var j = 0; j < curData.values.length; j++) {
                    cc.tween(curData.values)
                        .to(duration, (_a = {}, _a[j] = (data_2.values[j] > 1) ? 1 : data_2.values[j], _a))
                        .start();
                }
                // 样式动起来！
                cc.tween(curData)
                    .to(duration, {
                    lineWidth: data_2.lineWidth || curData.lineWidth,
                    lineColor: data_2.lineColor || curData.lineColor,
                    fillColor: data_2.fillColor || curData.fillColor,
                    joinColor: data_2.joinColor || curData.joinColor
                })
                    .start();
            }
            _this.scheduleOnce(function () {
                // 关闭每帧更新
                _this.keepUpdating = false;
                // resolve Promise
                _this.toRes();
                _this.toRes = null;
            }, duration);
        });
    };
    /**
     * 检查并调整数据中的数值数量
     * @param fill 填充数值
     */
    RadarChart.prototype.resizeCurDatasValues = function (fill) {
        if (fill === void 0) { fill = 0; }
        var curDatas = this._curDatas;
        for (var i = 0; i < curDatas.length; i++) {
            var curData = curDatas[i];
            // 数值数量少于轴数时才进行调整
            if (curData.values.length < this._axes) {
                var diff = this._axes - curData.values.length;
                for (var j = 0; j < diff; j++) {
                    curData.values.push(fill);
                }
            }
        }
    };
    __decorate([
        property({ type: cc.Node, tooltip: CC_DEV && '绘制节点（不指定则默认为当前节点）' })
    ], RadarChart.prototype, "target", void 0);
    __decorate([
        property
    ], RadarChart.prototype, "_axisLength", void 0);
    __decorate([
        property({ tooltip: CC_DEV && '轴线长度' })
    ], RadarChart.prototype, "axisLength", null);
    __decorate([
        property
    ], RadarChart.prototype, "_axes", void 0);
    __decorate([
        property({ tooltip: CC_DEV && '轴线数量（至少 3 条）' })
    ], RadarChart.prototype, "axes", null);
    __decorate([
        property
    ], RadarChart.prototype, "_axisScales", void 0);
    __decorate([
        property({ tooltip: CC_DEV && '轴线上的刻度数（至少 1 个）' })
    ], RadarChart.prototype, "axisScales", null);
    __decorate([
        property
    ], RadarChart.prototype, "_drawAxes", void 0);
    __decorate([
        property({ tooltip: CC_DEV && '是否绘制轴线' })
    ], RadarChart.prototype, "drawAxes", null);
    __decorate([
        property
    ], RadarChart.prototype, "_gridLineWidth", void 0);
    __decorate([
        property({ tooltip: CC_DEV && '轴线和外网格线的宽度' })
    ], RadarChart.prototype, "gridLineWidth", null);
    __decorate([
        property
    ], RadarChart.prototype, "_innerGridLineWidth", void 0);
    __decorate([
        property({ tooltip: CC_DEV && '内网格线宽度' })
    ], RadarChart.prototype, "innerGridLineWidth", null);
    __decorate([
        property
    ], RadarChart.prototype, "_gridLineColor", void 0);
    __decorate([
        property({ tooltip: CC_DEV && '轴线和网格线的颜色' })
    ], RadarChart.prototype, "gridLineColor", null);
    __decorate([
        property
    ], RadarChart.prototype, "_gridFillColor", void 0);
    __decorate([
        property({ tooltip: CC_DEV && '网格内部填充的颜色' })
    ], RadarChart.prototype, "gridFillColor", null);
    __decorate([
        property
    ], RadarChart.prototype, "_dataValuesStrings", void 0);
    __decorate([
        property({ type: [cc.String], tooltip: CC_DEV && '数据数值（字符串形式，使用英文逗号分隔）' })
    ], RadarChart.prototype, "dataValuesStrings", null);
    __decorate([
        property
    ], RadarChart.prototype, "_dataLineWidths", void 0);
    __decorate([
        property({ type: [cc.Integer], tooltip: CC_DEV && '数据线宽度' })
    ], RadarChart.prototype, "dataLineWidths", null);
    __decorate([
        property
    ], RadarChart.prototype, "_dataLineColors", void 0);
    __decorate([
        property({ type: [cc.Color], tooltip: CC_DEV && '数据线颜色' })
    ], RadarChart.prototype, "dataLineColors", null);
    __decorate([
        property
    ], RadarChart.prototype, "_dataFillColors", void 0);
    __decorate([
        property({ type: [cc.Color], tooltip: CC_DEV && '数据填充颜色' })
    ], RadarChart.prototype, "dataFillColors", null);
    __decorate([
        property
    ], RadarChart.prototype, "_dataJoinColors", void 0);
    __decorate([
        property({ type: [cc.Color], tooltip: CC_DEV && '数据节点颜色' })
    ], RadarChart.prototype, "dataJoinColors", null);
    __decorate([
        property
    ], RadarChart.prototype, "_drawDataJoin", void 0);
    __decorate([
        property({ tooltip: CC_DEV && '是否绘制数据节点' })
    ], RadarChart.prototype, "drawDataJoin", null);
    RadarChart = __decorate([
        ccclass,
        executeInEditMode,
        executionOrder(-1)
    ], RadarChart);
    return RadarChart;
}(cc.Component));
exports.default = RadarChart;
/**
 * 不指定时使用的样式配置
 */
var defaultOptions = {
    lineWidth: 5,
    lineColor: cc.Color.BLUE,
    fillColor: cc.color(120, 120, 180, 100),
    joinColor: cc.Color.WHITE,
};

cc._RF.pop();